<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import {
  listPictureTagCategoryUsingGet,
  listPictureVoByPageUsingPost,
} from "@/api/pictureController.ts";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import PictureVO = API.PictureVO;

const dataList = ref<API.PictureVO[]>([]);
const total = ref(0);
const loading = ref(true);

const searchParams = reactive<API.PictureQueryDTO>({
  current: 1,
  pageSize: 12,
  sortField: "createTime",
  sortOrder: "descend",
});
const pagination = computed(() => {
  return {
    current: searchParams.current,
    pageSize: searchParams.pageSize,
    total: total.value,
    showSizeChanger: true,
    showQuickJumper: true,
    position: "bottomCenter",
    onChange: (current, pageSize) => {
      searchParams.current = current;
      searchParams.pageSize = pageSize;
      fetchData();
    },
  };
});

const fetchData = async () => {
  loading.value = true;
  const params = {
    ...searchParams,
    tags: [] as string[],
  };
  if (selectedCategory.value !== "all") {
    params.category = selectedCategory.value;
  }
  selectedTagList.value.forEach((tag, index) => {
    if (tag) {
      params.tags.push(tagList.value[index]);
    }
  });

  const res = await listPictureVoByPageUsingPost(params);

  if (res.code === 0 && res.data) {
    dataList.value = res.data.records ?? [];
    total.value = res.data.total ?? 0;
  } else {
    message.error("获取数据失败，" + res.message);
  }
  loading.value = false;
};

const categoryList = ref<string[]>([]);
const tagList = ref<string[]>([]);
const selectedCategory = ref<string>("all");
const selectedTagList = ref<boolean[]>([]);

const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet();
  if (res.code === 0 && res.data) {
    categoryList.value = res.data.categoryList ?? [];
    tagList.value = res.data.tagList ?? [];
  } else {
    message.error("获取标签和分类失败，" + res.message);
  }
};

const doSearch = () => {
  searchParams.current = 1;
  fetchData();
};

const router = useRouter();
const doClickPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  });
};

onMounted(() => {
  fetchData();
  getTagCategoryOptions();
});
</script>

<template>
  <div id="homePage">
    <!--  搜索框-->
    <div class="search-bar">
      <a-input-search
        v-model:value="searchParams.searchText"
        placeholder="从海量图片中搜索"
        enter-button="Search"
        size="large"
        @search="doSearch"
      />
    </div>
    <!--    分类和标签筛选-->
    <a-tabs v-model:activeKey="selectedCategory" @change="doSearch">
      <a-tab-pane key="all" tab="全部" />
      <a-tab-pane
        v-for="category in categoryList"
        :key="category"
        :tab="category"
      />
    </a-tabs>
    <div class="tag-bar">
      <span style="margin-right: 8px">标签:</span>
      <a-space :size="[0, 8]" wrap>
        <a-checkable-tag
          v-for="(tag, index) in tagList"
          :key="tag"
          v-model:checked="selectedTagList[index]"
          @change="doSearch"
        >
          {{ tag }}
        </a-checkable-tag>
      </a-space>
    </div>
    <!--  图片列表-->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :pagination="pagination"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item>
          <a-card hoverable @click="doClickPicture(picture)">
            <template #cover>
              <img
                :alt="picture.name"
                :src="picture.url"
                style="height: 180px; object-fit: cover"
              />
            </template>
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <a-tag color="green">
                    {{ picture.category ?? "默认" }}
                  </a-tag>
                  <a-tag v-for="tag in picture.tags" :key="tag"
                    >{{ tag }}
                  </a-tag>
                </a-flex>
              </template>
            </a-card-meta>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<style scoped>
#homePage {
  .search-bar {
    margin: 0 auto 16px;
    max-width: 480px;
  }

  .tag-bar {
    margin-bottom: 16px;
  }
}
</style>
